  * {
      margin: 0;
      padding: 0;
  }

  body {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  h2 {
      margin-bottom: 40px;
      color: rgb(55, 55, 55)
  }

  .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #f3f3f3;
      width: 100%;
      height: 100%;
  }

  @media screen and (min-width: 500px) {
      .container {
          width: 500px;
          height: 83%;
      }
  }

  .avatar {
      display: flex;
      flex-direction: row;
      align-items: center;
  }

  .wrapper {
      width: 200px;
      height: 200px;
      margin: 20px;
      overflow: hidden;
  }

  img {
      width: 200px;
      height: 200px;
  }

  .arrow {
      width: 50px;
      height: 50px;
      border: 25px solid rgba(255, 255, 255, 0);
      box-sizing: border-box;
  }

  .left {
      border-right: 25px solid #e05c5c;
  }

  .right {
      border-left: 25px solid rgb(224, 92, 92);
  }

  input {
      border: 1px solid #e05c5c;
      padding: 5px;
      outline: 0;
  }

  button {
      width: 180px;
      background: #e05c5c;
      border: none;
      outline: 0;
      color: rgba(255, 255, 255, 0.9);
      padding: 10px;
      margin-top: 20px;
  }

  button:active {
      background: rgb(211, 93, 93);
  }